{extends file="../home.html"}
{block name="title"}{$head_title}{/block}

{block name="css"}
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Css/front/front_css/refresh_load.css?version={$version}"/>
<link href="__PUBLIC__/Css/front/css/zanshang_home.css?version={$version}" type="text/css" rel="stylesheet">
<style type="text/css">
body{
	background: #F3F3F3;
}
/*全屏查看器样式*/
.fullscreen{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 10000;
	background-color: #000;
	display: none;
}
.fullscreen .fullscreen_slide{
	background-color: #000;
}
</style>
{/block}
{block name="content"}
	
<div class="com_header">
	<a href="javascript:;" class="go_back"><i class="icon_back"></i></a>赞赏频道<a href="/Index/message" class="msg"><i class="icon_msg"></i><span class="dot"></span></a>
</div>

<div id="load_wrapper">
	<div id="scroller">
		<div id="pullDown">
		    <span class="pullDownIcon"></span>
		</div>

			<div class="header clearfix">
				<img src="/Public/Images/img/icon-hone-chou-50@3x.png" alt="" class="header_img">
				<div class="header_main">
					<h1 class="title">赞赏频道<span class="today">今日新帖34</span></h1>
					<p class="level">LV0赞赏频道</p>
					<div class="line">
						<p class="line-inner" data-width="50"></p>
					</div>
					<!-- 关注 -->
					<div class="btn_gz"><span></span>关注</div>

					<!-- 已关注 -->
					<div class="gz_yes" style="display: none;">已关注</div>
					<!-- 签到 -->
					<div class="qiandao" style="display: none;">
						<i class="icon_qd"></i>签到
					</div>
					<!-- 已签到 -->
					<div class="qd_yes" style="display: none;">已签到</div>
				</div>
			</div>
			<div class="home_list">
				<div class="home_item">
					<div class="user_info clearfix">
						<a href="/Index/others_personal_center" class="avatar">
							<img src="/Public/Images/img/icon-hone-chou-50@3x.png" alt="">
						</a>
						<div class="user_cont">
							<span class="nickname" onclick="location='/Index/others_personal_center'">花花世界</span>
							<i class="tag">女神认定</i>
							<i class="tag">颜值认定</i>
							<i class="tag">颜值认定</i>
							<i class="tag">颜值认定</i>
							<i class="tag">颜值认定</i>
							<i class="tag">颜值认定</i>
						</div>
					</div>
					<a href="/Index/zanshang_detail">
					<div class="item_title">
						一花一世界，一叶一菩提
					</div>
					<div class="item_desc">
						一朵花就是一个宇宙。一个人身也是一个宇宙。万物渺小或者宏大，微观世界或者宏观世界，都是一个世界。
					</div>
					<ul class="item_imgs clearfix">
						<li>
							<img src="/Public/Images/img/Mask@3x.png" alt="">	
						</li>
						<li>
							<img src="/Public/Images/img/Mask@3x.png" alt="">	
						</li>
						<li>
							<img src="/Public/Images/img/Mask@3x.png" alt="">	
						</li>
						<li>
							<img src="/Public/Images/img/Mask@3x.png" alt="">	
						</li>
					</ul>
					<div class="item_bot clearfix">
						<span class="time fl">13:40</span>
						<span class="fl see">查看&nbsp;918</span>
						<span class="fl pl">评论&nbsp;12</span>
						<span class="price fr">赞赏价：¥10</span>
						<span class="fen fr">8.6分</span>
					</div>
					</a>
				</div>
				<div class="home_item">
					<div class="user_info clearfix">
						<a href="/Index/others_personal_center" class="avatar">
							<img src="/Public/Images/img/icon-hone-chou-50@3x.png" alt="">
						</a>
						<div class="user_cont">
							<span class="nickname" onclick="location='/Index/others_personal_center'">花花世界</span>
							<i class="tag">女神认定</i>
							<i class="tag">颜值认定</i>
		
						</div>
					</div>
					<a href="/Index/zanshang_detail">
					<div class="item_title">
						一花一世界，一叶一菩提
					</div>
					<div class="item_desc">
						一朵花就是一个宇宙。一个人身也是一个宇宙。万物渺小或者宏大，微观世界或者宏观世界，都是一个世界。
					</div>
					<ul class="item_imgs clearfix">
						<li>
							<img src="/Public/Images/img/Mask@3x.png" alt="">	
						</li>
						<li>
							<img src="/Public/Images/img/Mask@3x.png" alt="">	
						</li>
						<li>
							<img src="/Public/Images/img/Mask@3x.png" alt="">	
						</li>
						<li>
							<img src="/Public/Images/img/Mask@3x.png" alt="">	
						</li>
						<li>
							<img src="/Public/Images/img/Mask@3x.png" alt="">	
						</li>
						<li>
							<div class="mask">
								<div class="txt">包含共20张图</div>
							</div>
							<img src="/Public/Images/img/Mask@3x.png" alt="">	
						</li>
					</ul>
					<div class="item_bot clearfix">
						<span class="time fl">13:40</span>
						<span class="fl see">查看&nbsp;918</span>
						<span class="fl pl">评论&nbsp;12</span>
						<span class="price fr">赞赏价：¥10</span>
						<span class="fen fr">8.6分</span>
					</div>
					</a>
				</div>

			</div>
			<div id="pullUp">
				<span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载...</span>
			</div>
		</div>
	</div>


	<!-- 发布 -->
	<a href="/Index/post_zs"><div class="post"></div></a>

{/block}
{block name="js"}
<script type="text/javascript" src="__PUBLIC__/Js/front/iscroll.js"></script>
<script type="text/javascript" src="__PUBLIC__/Js/front/js/zanshan_load.js"></script>
{literal}
	
<script>
	var total = 1
    var firstRow = 1


	$(function(){
		//图片正方形显示
		var imgw = $('.item_imgs li').width()
		imgh = $('.item_imgs li').height(imgw);
		// 百分比
		$('.line-inner').width($('.line-inner').attr("data-width")+"%")
	})
	
	
	/*关注&签到*/
    $(function(){
    	$('.btn_gz').click(function(){
			$(this).hide();
			$('.gz_yes').show();
			$('.qiandao').show();
		})
	    
	    $('.qiandao').on('click',function(){
	    	$(this).hide();
	    	toast('已签到成功')
			$('.qd_yes').show();
	    })  

	    // 取消关注
	    $('.gz_yes').on('click',function(){
	    	$(this).hide();
	    	$('.qd_yes').hide();
			$('.qiandao').hide();
	    	$('.btn_gz').show();
	    })
    });
  	//图片查看器
	$(function(){
		$(document).on('click', '.dynamic_img', function(event){
			event.preventDefault();
			var row = $(this).data('row');
			var img_urls = [];
			$(this).parent().children('.dynamic_img').each(function() {
			    img_urls.push($(this).data("img"));
			});
			var html = '';
			for(i=0;i<img_urls.length;i++){
				html += '<div class="swiper-slide fullscreen_slide"><img src="'+img_urls[i]+'"/></div>';
			}
			$('#swiper_wrapper').empty().append(html);
			console.log(img_urls);
			$('#fullscreen').show();
			var full_swiper = new Swiper('.fullscreen',{
			    //pagination : '.full_pagination',
			});
			full_swiper.slideTo(row, 0, false);
			
		});
		// 关闭查看器
		$('#fullscreen').on('click', function(event) {
			event.preventDefault();
			$(this).hide();
		});
	})
    
</script>
{/literal}
{/block}